<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <div class="header_left">
        <div class="header_left_top">
          <div class="icon_box">
            <i class="iconfont icon-31shouyexuanzhong"></i>
          </div>
          <div>
            <span class="name">设施管理</span>
            <p></p>
          </div>
        </div>
        <span class="total">0个项目,已在9分钟前更新</span>
      </div>
      <div class="header_right">
        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <a-button @click="handleAdd('新增设施')" type="primary" icon="plus"
            >新增</a-button
          >
          <a-button
            @click="batchDel"
            v-if="selectedRowKeys.length > 0"
            ghost
            type="primary"
            icon="delete"
            >批量删除
          </a-button>
          <!--  -->
          <a-upload
            name="file"
            :showUploadList="false"
            :multiple="false"
            :action="importExcelUrl"
            :headers="tokenHeader"
            @change="handleImportExcel"
          >
            <a-button type="primary" icon="import">导入</a-button>
          </a-upload>
          <a-button
            style="border-right: 1px solid rgb(211, 209, 209)"
            type="primary"
            icon="download"
            @click="handleExportXls('设施管理')"
            >导出</a-button
          >
        </div>
        <!-- 表单搜索 -->
        <a-form class="form_" layout="inline" @keyup.enter.native="searchQuery">
          <a-form-item>
            <a-input
              placeholder="设施名称"
              v-model="queryParam.facilitiesName"
            ></a-input>
          </a-form-item>
          <!-- <a-form-item>
            <a-input placeholder="型号" v-model="queryParam.model"></a-input>
          </a-form-item> -->

          <span
            style="float: left; overflow: hidden"
            class="table-page-search-submitButtons"
          >
            <a-button type="primary" @click="searchQuery" icon="search"
              >查询</a-button
            >
            <a-button type="primary" @click="searchReset" icon="reload"
              >重置</a-button
            >
          </span>
        </a-form>
      </div>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a
          style="font-weight: 600"
          >{{ selectedRowKeys.length }}</a
        >项&nbsp;&nbsp;
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        :columns="columns"
        :scroll="{ x: 960 }"
        size="middle"
        :pagination="ipagination"
        :dataSource="dataSource"
        :loading="loading"
        :expandedRowKeys="expandedRowKeys"
        :rowSelection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
        @expandedRowsChange="handleExpandedRowsChange"
        @change="handleTableChange"
      >
        <span slot="action" slot-scope="text, record">
          <a href="javascript:;" @click="handleBoundary(record)">排放过程</a>
          <a-divider type="vertical" />
          <a href="javascript:;" @click="handleDetail(record)">详情</a>

          <a-divider type="vertical" />

          <a-dropdown>
            <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <!-- <a href="javascript:;" @click="handleDetail(record)">详情</a> -->
                <a @click="handleEdit(record)">编辑</a>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm
                  title="确定删除吗?"
                  @confirm="() => handleDelete(record.id)"
                >
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
        <!-- 字符串超长截取省略号显示 -->
        <span slot="url" slot-scope="text">
          <j-ellipsis :value="text" :length="25" />
        </span>
        <!-- 字符串超长截取省略号显示-->
        <span slot="component" slot-scope="text">
          <j-ellipsis :value="text" />
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->
    <equipment-modal ref="modalForm" @ok="modalFormOk"></equipment-modal>
    <equipment-boundary-modal ref="modalboundary" @ok2="modalFormOk"></equipment-boundary-modal>
    <!-- <permission-modal ></permission-modal> -->
    <!-- <permission-data-rule-list
      ref="PermissionDataRuleList"
      @ok="modalFormOk"
    ></permission-data-rule-list> -->
  </a-card>
</template>

<script>
import EquipmentModal from "./Equipment/EquipmentModal";
import { getPermissionList } from "@/api/api";
import { ListMixin } from "@/mixins/ListMixin";
import EquipmentBoundaryModal from "./Equipment/EquipmentBoundary";
import JEllipsis from "@/components/Control/JEllipsis";

const columns = [
  {
    title: "设施名称",
    dataIndex: "facilitiesName",
    key: "facilitiesName",
  },

  {
    title: "来源",
    dataIndex: "source",
    key: "source",
  },

  {
    title: "型号",
    dataIndex: "model",
    key: "model",
  },
  {
    title: "分类",
    dataIndex: "classify",
    key: "classify",
  },
  {
    title: "位置",
    dataIndex: "location",
    key: "location",
  },
  {
    title: "负责人",
    dataIndex: "principal",
    key: "principal",
  },
  {
    title: "填报员",
    dataIndex: "informant",
    key: "informant",
  },

  {
    title: "排放过程数量",
    dataIndex: "emissionCount",
    key: "emissionCount",
  },
  {
    title: "操作",
    dataIndex: "action",
    fixed: "right",
    scopedSlots: { customRender: "action" },
    align: "center",
    // width: 250,
  },
];

export default {
  name: "PermissionList",
  mixins: [ListMixin],
  components: {
    // PermissionDataRuleList,
    EquipmentModal,
    JEllipsis,
    EquipmentBoundaryModal,
  },
  data() {
    return {
      description: "这是菜单管理页面",
      // 表头
      columns: columns,
      loading: false,
      // 展开的行，受控属性
      expandedRowKeys: [],
      url: {
        list: "/accounting/gmAccountingFacilitiesInfo/list",
        delete: "/accounting/gmAccountingFacilitiesInfo/delete",
        deleteBatch: "/accounting/gmAccountingFacilitiesInfo/deleteBatch",
        exportXlsUrl: "/accounting/gmAccountingFacilitiesInfo/exportXls",
        importExcelUrl: "accounting/gmAccountingFacilitiesInfo/importExcel",
      },
    };
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG["domianURL"]}/${this.url.importExcelUrl}`;
      // return ''
    },
  },
  methods: {
    // 绑定边界
    handleBoundary(facilities) {
      this.$refs.modalboundary.show(facilities);
    },
    // 打开数据规则编辑
    handleDataRule(record) {
      this.$refs.PermissionDataRuleList.edit(record);
    },
    handleAddSub(record) {
      this.$refs.modalForm.title = "添加子菜单";
      this.$refs.modalForm.disableSubmit = false;
      this.$refs.modalForm.edit({
        status: "1",
        permsType: "1",
        route: true,
        parentId: record.id,
        menuType: 1,
      });
    },
    handleExpandedRowsChange(expandedRows) {
      this.expandedRowKeys = expandedRows;
    },
  },
};
</script>
<style scoped>
/* @import '~@assets/less/common.less'; */
</style>